<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">首页：</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>工资管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <!-- 查询、工资发放列表切换 -->
    <el-row>
      <el-button type="primary" plain @click="show(1)"
        >查询工资发放时间</el-button
      >
      <el-button type="success" plain @click="show(2), salaryff()"
        >工资发放</el-button
      >
    </el-row>
    <br />
    <!-- 查询 -->
    <!-- 查询工资发放时间 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      v-show="isShow1"
    >
      <el-form-item label="员工姓名：">
        <el-input
          v-model="formInline.xingming"
          placeholder="请输入员工姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlequery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="salaryData" style="width: 100%" border v-show="isShow1">
      <el-table-column prop="UserName" label="员工姓名"> </el-table-column>
      <el-table-column prop="SDate" label="发放时间">
        <template slot-scope="scope">
          {{ scope.row.SDate | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="increaseWages" label="加工资"> </el-table-column>
      <el-table-column prop="DecreaseWages" label="扣工资"> </el-table-column>
      <el-table-column prop="BSalary" label="基本月薪"> </el-table-column>
      <el-table-column prop="Salary" label="总月薪"> </el-table-column>
    </el-table>
    <!-- 工资发放 -->
    <el-form
      :inline="true"
      :model="formInline2"
      class="demo-form-inline"
      v-show="isShow2"
    >
      <el-form-item label="按职位查询：">
        <el-select v-model="formInline2.zhiwei" placeholder="请选择">
          <el-option label="部门经理" value="0"></el-option>
          <el-option label="员工" value="1"></el-option>
          <el-option label="其他成员" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlecx">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="salaryData2" style="width: 100%" border v-show="isShow2">
      <el-table-column prop="UserGH" label="员工工号"> </el-table-column>
      <el-table-column prop="UserName" label="员工姓名"> </el-table-column>
      <el-table-column prop="Department" label="所在部门"> </el-table-column>
      <el-table-column prop="Position" label="当前职位"> </el-table-column>
      <el-table-column prop="Telephone" label="电话"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="fafang(scope.row)"
            >发放</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 发放弹窗 -->
    <el-dialog title="发放信息：" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="收款人：" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="form.skr"></el-input>
        </el-form-item>
        <el-form-item label="收款工号：" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="form.skgh"></el-input>
        </el-form-item>
        <el-form-item label="发款人：" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="发款工号：" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="form.usergh"></el-input>
        </el-form-item>
        <el-form-item label="发放时间：" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.time"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="奖金：" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="form.increasewages"></el-input>
        </el-form-item>
        <el-form-item label="扣工资：" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="form.decreasewages"></el-input>
        </el-form-item>
        <el-form-item label="基本工资：" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="form.bsalary"></el-input>
        </el-form-item>
        <el-form-item label="发款总工资：" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="form.salary"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="(dialogFormVisible = false), xiugaienter()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import Qs from "../../node_modules/qs";
export default {
  name: "salary",
  // 时间格式化
  filters: {
    filterTime(val) {
      return moment(val).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  data() {
    return {
      isShow1: true, // 查询显示
      isShow2: false, // 工资发放隐藏
      // 查询工资发放时间
      formInline: {
        xingming: "", // 员工姓名
      },
      // 工资发放
      formInline2: {
        zhiwei: "",
      },
      salaryData: [], // 查询工资发放时间列表
      salaryData2: [], // 工资发放列表
      xiugaiTable: [], // 审核弹窗
      dialogFormVisible: false, // 默认隐藏修改弹窗
      formLabelWidth: "100px", // 修改弹窗输入框宽度
      // 发放工资弹窗
      form: {
        skgh: "",
        skr: "",
        username: "",
        usergh: "",
        increasewages: "",
        decreasewages: "",
        bsalary: "",
        salary: "",
        time: "",
      },
      bid: "",
    };
  },
  methods: {
    // 查询、工资发放列表切换
    show(e) {
      if (e == 1) {
        this.isShow1 = true;
        this.isShow2 = false;
      } else {
        this.isShow1 = false;
        this.isShow2 = true;
      }
    },
    // 刷新
    reshow() {
      let that = this;
      axios({
        method: "get",
        url: "http://127.0.0.1:9090/allsalary",
      }).then(function (res) {
        that.salaryData = res.data.data;
      });
      // this.form.skr = val.UserName;
      // this.form.skgh = val.UserGH;
    },
    // 员工姓名查询
    handlequery() {
      let that = this;
      let params = {
        name: this.formInline.xingming,
      };
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/searchsalary",
        data: Qs.stringify(params),
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
      }).then(function (res) {
        that.salaryData = res.data.data;
      });
    },
    // 工资发放列表
    salaryff() {
      let that = this;
      axios({
        method: "get",
        url: "http://127.0.0.1:9090/showsalary",
      }).then(function (res) {
        that.salaryData2 = res.data.data;
      });
    },
    // 职位查询
    handlecx() {
      let that = this;
      let params = {
        name: this.formInline2.zhiwei,
      };
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/searchsalary2",
        data: Qs.stringify(params),
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
      }).then(function (res) {
        that.salaryData2 = res.data.data;
      });
    },
    // 发放工资弹窗
    fafang(val) {
      this.dialogFormVisible = true;
      this.form.skr = val.UserName;
      this.form.skgh = val.UserGH;
      this.form.username = this.$store.state.logininfo.UserName;
      this.form.usergh = this.$store.state.logininfo.UserGH;
    },
    xiugaienter() {
      let that = this;
      let SDate = new Date(this.form.time).toLocaleDateString();
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/allsalary2",
        data: {
          UserGH: this.form.usergh,
          increaseWages: this.form.increasewages,
          DecreaseWages: this.form.decreasewages,
          BSalary: this.form.bsalary,
          Salary: this.form.salary,
          SDate: SDate,
        },
      }).then(function (res) {
        if (res.data.state == 1) {
          alert("发布成功");
        } else {
          alert("发布失败");
        }
        that.dialogFormVisible = false;
        that.reshow();
      });
    },
  },
  created() {
    let that = this;
    axios({
      method: "get",
      url: "http://127.0.0.1:9090/allsalary",
    }).then(function (res) {
      that.salaryData = res.data.data;
    });
    this.form.skr = val.UserName;
    this.form.skgh = val.UserGH;
  },
};
</script>

<style scoped>
/* 列表切换、模糊查询左对齐 */
.el-row,
.el-form {
  text-align: left;
}
</style>